import 'package:flutter/material.dart';
import 'package:ribo_base_core/base_models/base_chart_funnel_model.dart';
import 'package:ribo_base_core/base_models/base_chart_model.dart';
import 'package:ribo_base_core/base_styles/base_chart_style.dart';
import 'base_chart.dart';

class BaseChartFunnel extends StatefulWidget {
  BaseChartFunnel({Key key, @required this.model}) : super(key: key);
  final BaseChartFunnelModel model;

  @override
  _BaseChartFunnelState createState() => _BaseChartFunnelState();
}

class _BaseChartFunnelState extends State<BaseChartFunnel> {
  Map<String, dynamic> _option;

  @override
  Widget build(BuildContext context) {
    _handleModel();

    return BaseChart(
        model: BaseChartModel(
            style: widget.model?.style,
            option: this._option));
  }

  void _handleModel(){
    List<BaseChartFunnelData> data = widget.model?.data;
    List<String> xAxisData = data.map((item) => item.name).toList();
    List<Map<String, dynamic>> yAxisData = data
        .map((item) => {
      'name': item.name,
      'value': item.value,
      'itemStyle': item?.itemStyle?.toJson()??{}
    }).toList();

    this._option = {
      'tooltip': {
        'trigger': 'item',
        'formatter': widget.model?.tooltipFormatter?.toJson()
      },
      'legend': {
        ...BaseChartLegendStyle().toJson(),
        ...widget.model?.style?.legend?.toJson()??{},
        'bottom':'bottom',
        'data': xAxisData,
      },
      'series': [
        {
          'type':'funnel',
          'width': '70%',
          'left': 'center',
          'top': 'middle',
          'minSize': '0%',
          'maxSize': '100%',
          'sort': widget.model.sort,
          'height': '75%',
          'gap': 0,
          'label': {
            'show': true,
            'position': 'rightTop',
            'fontSize': 8,
            'formatter': widget.model?.labelFormatter?.toJson()
          },
          'labelLine': {
            'show': false,
            'length': 2,
          },
          'emphasis': {
            'label': {
              'fontSize': 8
            }
          },
          'data': yAxisData
        }
      ]
    };
  }
}
